<template>
	<view class="content">
		<view class="top-msg">
			根据相关政策法规，使用工银诚意金需验证您的手机号和身份证
		</view>
		<input v-model="phone" type="number" maxlength="11" placeholder="您的手机号"/>
		<input v-model="code" type="number" maxlength="6" placeholder="请输入验证码"/>
		<button type="warn" size="mini" class="code-button" :disabled="time!=60" @click="getCode">
			{{time==60?'获取验证码':time+'s后重试'}}
		</button>
		<input v-model="idCard" type="idcard" maxlength="18" placeholder="您的身份证号"/>
		<button type="warn"  class="sub-button" :disabled="!phone||!code||!idCard||!agree" @click="onSubmit">
			提交
		</button>
		<view class="bottom-msg">
			<radio-group style="display: inline-block" @click.stop="this.agree=!this.agree">
				<radio color="#D14F43"  :checked="agree" >我已阅读并同意</radio>
			</radio-group>
			<text style="color:#DC5C4B" @click="showPopup(1)">《个人银行结算账户管理协议》</text>和
			<text style="color:#DC5C4B" @click="showPopup(2)">《中国工商用户借记卡章程》</text>
		</view>
		<agreement :popup="popup" @showPopup="showPopup"/>
	</view>
</template>

<script>
	import agreement from "../component/agreement.vue"
	export default {
		components: {
			agreement
		},
		data() {
			return {
				agree:false,
                html:'',
				phone:'',
				code:'',
				idCard:'',
				time:60,
				timer:null,
                popup:0,
                height:'',
			}
		},
		onLoad() {
            uni.getSystemInfo('windowHeight').then(r=>{
                console.log(r)
                this.height=r[1].windowHeight-100+'px'
            })
		},
		methods: {
			agreeChange(val){
				this.agree=!this.agree
			},
			getCode(){
				this.timer=setInterval(()=>{
					this.time--
					if(!this.time){
						this.time=60
						clearInterval(this.timer)
					}
				},1000)
			},
			onSubmit(){
				if(!(/^1[3456789]\d{9}$/.test(this.phone))){
					uni.showModal({
						title: '提示',
						content: '请输入正确的手机号码',
						showCancel: false,
					});
					return
				}
				if(this.code.length!=6){
					uni.showModal({
						title: '提示',
						content: '请输入正确的验证码',
						showCancel: false,
					});
					return
				}
				if(!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.idCard))) {
					uni.showModal({
						title: '提示',
						content: '请输入正确的身份证',
						showCancel: false,
					});
					return
				}
			},
            showPopup(num){
			    this.popup=num
            }
		}
	}
</script>

<style scoped>
	.content {
        height: 100%;
		padding-bottom: 50upx;
	}
	.top-msg{
		line-height: 64upx;
		background-color: rgba(242, 242, 242, 1);
		color: rgba(79, 79, 79, 1);
		font-size: 24upx;
		text-align: left;
		font-family: PingFangSC-regular;
		padding-left: 3%;
	}
	input{
		width: 90%;
		margin:40upx 0 0 5%;
		border-bottom: 1px solid rgba(227, 227, 227, 1);
		font-size: 28upx;
		font-family: PingFangSC-regular;
	}
	.code-button{
		position: absolute;
		margin-top: -70upx;
		right: 5%;
		border-radius:120upx;
		z-index: 100;
	}
	.sub-button{
		margin-top: 70upx;
		width: 90%;
		margin-left: 5%;
		border-radius:120upx;
	}
	.bottom-msg{
		width: 90%;
		margin:20upx 0 0 5%;
		color: rgba(79, 79, 79, 1);
		font-size: 24upx;
		font-family: PingFangSC-regular;
	}
    .popup-html{
        width: 100%;
        overflow:scroll;
		-webkit-overflow-scrolling: touch;
        text-align: left;
        font-size: 28upx;
        line-height: 50upx;
        border-top:1px solid rgba(1,1,1,0.1)
    }
    .popup-hidden{
        width: 100%;
        height: 50px;
        border-top:1px solid rgba(1,1,1,0.1)
    }
</style>
